<template>
  <div class="index">
    <el-container>
      <el-aside width="auto">
        <el-menu
          :collapse='collapse'
          class="el-menu-vertical-demo"
          @open="handleOpen"
          @close="handleClose"
          background-color="#545c64"
          text-color="#fff"
          active-text-color="#ffd04b"
          :unique-opened='true'
          :router='true'
        >
          <!-- 用户信息 -->
          <div class="userheader">
            <div class="img"><img
                src="../assets/login.jpg"
                alt=""
                id="userimg"
              ></div>
            <p>用户名</p>
          </div>
          <!-- 导航栏 -->
          <el-menu-item index="/user">
            <i class="el-icon-setting"></i>
            <span slot="title">用户管理</span>
          </el-menu-item>
          <el-submenu index="1">
            <template slot="title">
              <i class="el-icon-location"></i>
              <span>分类管理</span>
            </template>
            <el-menu-item index="/categoryFirst">一级分类管理</el-menu-item>
            <el-menu-item index="/categorySecond">二级分类管理</el-menu-item>
          </el-submenu>
          <el-menu-item index="/productList">
            <i class="el-icon-menu"></i>
            <span slot="title">商品管理</span>
          </el-menu-item>
        </el-menu>
      </el-aside>
      <el-container>
        <!-- 头部 -->
        <el-header>
          <!-- 折叠 -->
          <a
            href="javascript:;"
            @click="collapse=!collapse"
            class="myicon myicon-menu toggle-btn"
          ></a>
          <h2>欢迎来到后台管理系统</h2>
          <!-- 退出 -->
          <div
            class="logout"
            @click="logout"
          >退出</div>
        </el-header>
        <!-- 下边栏 -->
        <el-main>
            <router-view></router-view>
        </el-main>
      </el-container>
    </el-container>
  </div>
</template>
<script>
import {logout} from '@/api'
export default {
  data () {
    return {
      collapse: false
    }
  },
  methods: {
    handleOpen () {},
    handleClose () {},
    // 退出
    logout () {
      logout().then(res => {
        // console.log(res)
        if (res.success) {
          this.$router.push({path: 'login'})
        }
      })
    }
  }
}
</script>
<style lang="scss" scoped>
.index {
  height: 100%;
  .el-menu-vertical-demo:not(.el-menu--collapse) {
    width: 200px;
    min-height: 400px;
  }
//   中间内容
  .el-container {
    height: 100%;
    background-color: #f4f6f8;
  }
  //   侧边栏
  .el-aside {
    background-color: #545c64;
    //   头像
    .userheader {
      margin-bottom: 10px;
      width: 100%;
      height: 140px;
      background-color: #243443;
      .img {
        padding-top: 20px;
          width: 60px;
          height: 60px;
          margin: 0 auto;
          overflow: hidden;
        #userimg {
          width: 60px;
          height: 60px;
          box-sizing: border-box;
          border-radius: 50%;
          border: 2px solid #fff;
          box-shadow: 0 1px 5px #ddd;
          overflow: hidden;
        }
      }
      p {
          color: rgb(190, 190, 190);
          text-align: center;
          padding-top: 25px;
        }
    }
  }
//   头部
  .el-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    background-color: #fff;
    text-align: center;
    // 收缩按钮
    .toggle-btn {
      flex: 1;
      padding: 0 15px;
      margin-left: -20px;
      font-size: 36px;
      color: skyblue;
      cursor: pointer;
      line-height: 60px;
      &:hover {
        background-color: #4292cf;
      }
    }
    // 标题
    h2 {
      flex: 8;
      font-size: 20px;
    }
    // 退出
    .logout {
      flex: 2;
      font-size: 15px;
      cursor: pointer;
      &:hover {
        color:blue;
      }
    }
  }

}
</style>
